<template>
<!-- 发布招聘信息页面 -->
  <div id="ReleaseIinformation">
    <div class="ReleaseIinformation-wrapper">
       <div class="Header-wrapper">
            <yd-navbar title="发布信息" fontsize="16px" color="#fff" height="45px" bgcolor="#ffd602">
                <router-link to="/index" slot="left">
                  <i class="iconfont icon-back Fcolor"></i>
                </router-link>
                <router-link to="/RecruitmentRequirements" slot="right">
                  <div class="release-right">发布</div>
                </router-link>
            </yd-navbar>
        </div>
        <div class="table-wrapper">
         <ul>
           <li class="table" :id="item.id" v-for="(item,index) of tablelist" :key="item.id" @click="table(index,item.title)"
            :class="{oractive :index===nowIndex}">{{item.title}}</li>
         </ul>
        </div>
        <div class="table-center-wrapper" >
          <div class="table-fb" v-show="nowIndex===0">
           <!-- 没有信息 -->
          <div class="table-nocenter-wrapper" v-show="show1">
            <div class="table-notext">还没有发布任何信息</div>
          </div>
           <yd-layout>
              <transition appear enter-active-class="animated fadeIn" appear-active-class="animated fadeIn">
                  <ul>
                    <li class="table-box" v-for="item of fblist" :key="item.id" :id="item.id">
                      <div class="table-msg">
                        <div class="table-left">
                          <h2 class="table-title">{{item.jobname}}</h2>
                          <p class="table-text">{{item.actareaname}}</p>
                        </div>
                        <div class="table-right">
                          <div class="table-time">{{item.acttime}}</div>
                          <div class="table-Xcolor">{{item.jobsalary}}元</div>
                        </div>
                      </div>
                      <div class="table-btn">
                          <div class="btn-table" @click="go(item.id)">
                            简历筛选
                          </div>
                        <yd-button size="large" class="btn-table" @click.native="showok(item.id)">删除</yd-button>
                      </div>
                    </li>
                  </ul>
                  </transition>
            </yd-layout>
          </div>
          <div class="table-fb" v-show="nowIndex===1">
           <!-- 没有信息 -->
          <div class="table-nocenter-wrapper" v-show="show2">
            <div class="table-notext">还没有发布任何信息</div>
          </div>
           <yd-layout>
              <transition appear enter-active-class="animated fadeIn" appear-active-class="animated fadeIn">
                <ul>
                  <li class="table-box" v-for="item of wfblist" :key="item.id" :id="item.id">
                    <div class="table-msg">
                      <div class="table-left">
                        <h2 class="table-title">{{item.jobname}}</h2>
                        <p class="table-text">{{item.actareaname}}</p>
                      </div>
                      <div class="table-right">
                        <div class="table-time">{{item.acttime}}</div>
                        <div class="table-Xcolor">{{item.jobsalary}}元</div>
                      </div>
                    </div>
                    <div class="table-btn">
                      <div class="btn-table" @click="gook(item.id)" >
                        发布
                      </div>
                    </div>
                  </li>
                </ul>
              </transition>
            </yd-layout>
          </div>
        </div>
         <!-- 删除弹窗 -->
        <yd-popup v-model="show" position="center" class="tk-box">
          <div class="msg-box">
            <p style="text-align: center">
            是否删除
            </p>
            <div class="btn-msg">
              <div @click="show = false">取消</div>
              <div @click="remove(rid)" class="rcolor">删除</div>
            </div>
          </div>
        </yd-popup>
         <!-- 发布弹窗 -->
        <yd-popup v-model="ok" position="center" class="tk-box">
          <div class="msg-box">
            <p style="text-align: center">
            是否发布
            </p>
            <div class="btn-msg">
              <div @click="ok = false">取消</div>
              <div @click="fb(rid)" class="rcolor">发布</div>
            </div>
          </div>
        </yd-popup>
    </div>
  </div>
</template>
<script>
import apis from '../../../../../static/js/apis.js'
export default {
  data () {
    return {
      show: false,
      show1: true,
      show2: true,
      ok: false,
      nowIndex: 0,
      rid: '', // 存id
      tablelist: [
        {
          title: '发布中'
        },
        {
          title: '未发布'
        }
      ],
      wfblist: [],
      fblist: []
    }
  },
  methods: {
    getfblist () {
      this.$axios
        .post(
          apis + '/app/jobinfoapp/userlist',
          this.confusion(
            JSON.stringify({
              rectype: '1'
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
        // console.log(response)
          this.fblist = response.data
          // console.log(this.fblist)
          if (this.fblist.length === 0) {
            this.show1 = true
          } else {
            this.show1 = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
    },
    getwfblist () {
      this.$axios
        .post(
          apis + '/app/jobinfoapp/userlist',
          this.confusion(
            JSON.stringify({
              rectype: '0'
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
          // console.log(response)
          this.wfblist = response.data
          // console.log(this.wfblist)
          if (this.wfblist.length === 0) {
            this.show2 = true
          } else {
            this.show2 = false
          }
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
    },
    table (index, title) {
      this.nowIndex = index
      if (title === '发布中') {
        this.$axios
          .post(
            apis + '/app/jobinfoapp/userlist',
            this.confusion(
              JSON.stringify({
                rectype: '1'
              })
            ),
            {
              headers: {
                Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                'Content-Type': 'application/json;charset=UTF-8',
                'Cache-Control': 'no-cache',
                isApp: 'isApp'
              }
            }
          )
          .then(response => {
            // alert(response.data.id)
            if (response.data.id > 0 || response.data.id === undefined) {
              this.fblist = response.data
              // console.log(this.fblist)
              if (this.fblist.length === 0) {
                this.show1 = true
              } else {
                this.show1 = false
              }
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      } else {
        this.$axios
          .post(
            apis + '/app/jobinfoapp/userlist',
            this.confusion(
              JSON.stringify({
                rectype: '0'
              })
            ),
            {
              headers: {
                Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                'Content-Type': 'application/json;charset=UTF-8',
                'Cache-Control': 'no-cache',
                isApp: 'isApp'
              }
            }
          )
          .then(response => {
          // console.log(response)
            this.wfblist = response.data
            // console.log(this.wfblist)
            if (this.wfblist.length === 0) {
              this.show2 = true
            } else {
              this.show2 = false
            }
          })
          .catch(error => {
            console.log(error)
            this.$dialog.toast({
              mes: '服务器异常'
            })
          })
      }
    },
    showok (id) {
      this.show = true
      this.rid = id
    },
    gook (id) {
      this.ok = true
      this.rid = id
    },
    remove (rid) {
      // console.log(rid)
      this.show = false
      this.$axios
        .post(
          apis + '/app/jobinfoapp/delete',
          this.confusion(
            JSON.stringify({
              recid: rid + ''
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
          this.fblist.splice(rid, 1)
          this.$axios
            .post(
              apis + '/app/jobinfoapp/userlist',
              this.confusion(
                JSON.stringify({
                  rectype: '1'
                })
              ),
              {
                headers: {
                  Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                  'Content-Type': 'application/json;charset=UTF-8',
                  'Cache-Control': 'no-cache',
                  isApp: 'isApp'
                }
              }
            )
            .then(response => {
              // console.log(response)
              this.fblist = response.data
              // console.log(this.fblist)
              if (this.fblist.length === 0) {
                this.show1 = true
              } else {
                this.show1 = false
              }
            })
            .catch(error => {
              console.log(error)
              this.$dialog.toast({
                mes: '服务器异常'
              })
            })
        })
        .catch(error => {
          console.log(error)
          this.$dialog.toast({
            mes: '服务器异常'
          })
        })
    },
    fb (rid) {
      this.$axios
        .post(
          apis + '/app/jobinfoapp/push',
          this.confusion(
            JSON.stringify({
              recid: rid + ''
            })
          ),
          {
            headers: {
              Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
              'Content-Type': 'application/json;charset=UTF-8',
              'Cache-Control': 'no-cache',
              isApp: 'isApp'
            }
          }
        )
        .then(response => {
          this.wfblist.splice(rid, 1)
          this.$axios
            .post(
              apis + '/app/jobinfoapp/userlist',
              this.confusion(
                JSON.stringify({
                  rectype: '0'
                })
              ),
              {
                headers: {
                  Authorization: 'Bearer ' + JSON.parse(window.localStorage.getItem('userInfo')).token,
                  'Content-Type': 'application/json;charset=UTF-8',
                  'Cache-Control': 'no-cache',
                  isApp: 'isApp'
                }
              }
            )
            .then(response => {
              // console.log(response)
              this.wfblist = response.data
              // console.log(this.wfblist)
              this.$dialog.toast({
                mes: '发布成功',
                callback: () => {
                  // console.log(rid)
                  this.ok = false
                }
              })
            })
            .catch(error => {
              console.log(error)
            })
        })
        .catch(error => {
          console.log(error)
        })
    },
    go (id) {
      this.$router.push({
        path: '/personal/DeliveryList',
        query: {
          Listid: id
        }
      })
    }
  },
  created () {
    this.getfblist()
    this.getwfblist()
  },
  components: {
    apis
  }
}
</script>
<style scoped>

.icon-back {
  font-size: 24px;
}
.Fcolor {
  color: #fff;
}
.release-right {
  font-size: 12px;
  color: #fff;
}
.location {
  width: 100%;
  height: 0;
  overflow: hidden;
  padding-bottom: 42px;
  background: #f1f1f1;
  z-index: 1;
}
.table-wrapper ul {
  width: 100%;
  background: #fff;
  height: 42px;
  display: flex;
  border-bottom: 1px solid #dfdfdf;
}
.table {
  flex: 1;
  text-align: center;
  line-height: 42px;
  color: #333;
}
.table:nth-last-child(1) {
  border-left: 1px solid #e1e1e1;
}
.oractive {
  color: #ffd602;
}
.table-center-wrapper {
  position: fixed;
  top: 87px;
  bottom: 0;
  width: 100%;
  background: #fff;
  z-index: 5;
}
.table-fb {
  width: 100%;
  height: 100%;
  background: #fff;
  overflow: hidden;
}
.table-box {
  padding: 20px 12px;
  border-bottom: 1px solid #f1f1f1;
}
.table-msg {
  display: flex;
  box-sizing: border-box;
  width: 100%;
  margin-bottom: 35px;
}
.table-left {
  flex: 6;
  text-align: left;
}
.table-right {
  flex: 4;
  text-align: right;
}
.table-title {
  font-size: 14px;
  margin-bottom: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-text {
  font-size: 12px;
  color: #666;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.table-time {
  font-size: 12px;
  color: #666;
  margin-bottom: 5px;
}
.table-Xcolor {
  font-size: 12px;
  color: red;
}
.table-btn {
  width: 100%;
  text-align: right;
}
.btn-table {
  width: 64px;
  height: 22px;
  background: #ffe352;
  line-height: 22px;
  text-align: center;
  color: #333;
  font-size: 12px;
  display: inline-block;
  border-radius: 10px;
}
.table-notext {
  text-align: center;
  width: 100%;
  margin: 50% 0;
  font-size: 14px;
  color: #666;
}
.table-nocenter-wrapper {
  position: fixed;
  top: 87px;
  bottom: 0;
  width: 100%;
  background: #fff;
}
.tk-box {
  width: 90%;
  z-index: 8;
  background: #fff;
}
.msg-box {
  width: 100%;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  overflow: hidden;
}
.btn-msg {
  width: 200px;
  overflow: hidden;
  margin: 20px auto;
}
.btn-msg div {
  float: left;
  width: 45%;
  text-align: center;
  border-radius: 10px;
  background: #b3b3b3;
  color: #fff;
  height: 25px;
  line-height: 25px;
  margin: 0 5px;
}
.btn-msg .rcolor {
  background: #ff5b5b;
}
</style>
